<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() + "/";
%>
<!DOCTYPE html>
<html>
<head>
<base href="<%=basePath%>">
<meta charset="UTF-8">
<title>创建服务</title>
<head>

    <link href="../../jquery/bootstrap_3.3.0/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
    <script type="text/javascript" src="../../jquery/jquery-1.11.1-min.js"></script>
    <script type="text/javascript" src="../../jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="../../jquery/bs_pagination/jquery.bs_pagination.min.css">
    <script type="text/javascript" src="../../jquery/bs_pagination/jquery.bs_pagination.min.js"></script>
    <script type="text/javascript" src="../../jquery/bs_pagination/en.js"></script>
    <script type="application/javascript" src="../../jquery/commons/common.js"></script>
    <link href="../../jquery/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css" type="text/css" rel="stylesheet" />
    <script type="text/javascript" src="../../jquery/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.js"></script>
    <script type="text/javascript" src="../../jquery/bootstrap-datetimepicker-master/locale/bootstrap-datetimepicker.zh-CN.js"></script>
    <script type="text/javascript" src="../../jquery/bootstrap_3.3.0/js/bs_typeahead/bootstrap3-typeahead.min.js"/>
    <script type="text/javascript">

        $(function () {

            $("#service-customer").typeahead({
                source: function (query, process) {
                    $.get(
                        "/customer/getCustomerName",
                        { "name" : query },
                        function (data) {
                            process(data);
                            alert("我执行了")
                        },
                        "json"
                    );
                },
                delay: 500
            });

            //时间组件
            $(".time").datetimepicker({
                minView: "month",
                language:  'zh-CN',
                format: 'yyyy-mm-dd',
                autoclose: true,
                todayBtn: true,
                pickerPosition: "bottom-left"
            });

            function getCstType() {
                $.ajax({
                    url : "service/getTypeService",
                    type : "get",
                    dataType : "json",
                    success : function (data) {

                        var html = "<option></option>";

                        //遍历出来的每一个n，就是每一个user对象
                        $.each(data,function (i,n) {
                            html += "<option value='"+n.cstTypeId+"'>"+n.typeName+"</option>";
                        });

                        $("#service-type").html(html);

                    }

                });
            }
            getCstType();

            //对创建人下拉框赋值
            function getSysUserList(){
                $.ajax({

                    url : "sysUser/getSysUserList",
                    type : "get",
                    dataType : "json",
                    success : function (data) {

                        var html = "<option></option>";

                        //遍历出来的每一个n，就是每一个user对象
                        $.each(data,function (i,n) {
                            html += "<option value='"+n.userId+"'>"+n.userName+"</option>";
                        });

                        $("#service-creater").html(html);
                    }

                });
            }
            getSysUserList();



            $("#createserviceSaveBtn").click(function () {
                $.ajax({
                    url : "service/save",
                    data : {
                        "svrType": $.trim($("#service-type").val()),
                        "svrTitle": $.trim($("#service-outline").val()),
                        "svrCustName": $.trim( $("#service-customer").val()),
                        "svrRequest": $.trim( $("#service-request").val()),
                        "svrCreateBy": $.trim( $("#service-creater").val()),
                        "svrCreateDateStr": $.trim( $("#service-createTime").val()),
                        "svrStatus" : $.trim($("#service-status").val())
                    },
                    type : "post",
                    dataType : "json",
                    success : function (data) {
                        if(data.success){
                            alert("创建服务成功");
                        }else{
                            alert("创建服务失败");
                            $("#serviceCreateForm")[0].reset();
                        }
                    }
                })

            });

            Date.prototype.format = function(fmt) {
                var o = {
                    "M+" : this.getMonth() + 1, // 月份
                    "d+" : this.getDate(), // 日
                    "h+" : this.getHours(), // 小时
                    "m+" : this.getMinutes(), // 分
                    "s+" : this.getSeconds(), // 秒
                    "q+" : Math.floor((this.getMonth() + 3) / 3), // 季度
                    "S" : this.getMilliseconds()
                    // 毫秒
                };
                if (/(y+)/.test(fmt))
                    fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "")
                        .substr(4 - RegExp.$1.length));
                for ( var k in o)
                    if (new RegExp("(" + k + ")").test(fmt))
                        fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k])
                            : (("00" + o[k]).substr(("" + o[k]).length)));
                return fmt;
            }

        });
    </script>

<body>
<!-- 返回按钮 -->
<div style="position: relative; top: 35px; left: 10px;">
    <a href="javascript:void(0);" onclick="window.history.back();"><span class="glyphicon glyphicon-arrow-left" style="font-size: 20px; color: #DDDDDD"></span></a>
</div>

<!-- 大标题 -->
<div style="position: relative; left: 40px; top: -30px;">
    <div class="page-header">
        <h3>服务创建</h3>
    </div>
    <div style="position: relative; height: 50px; width: 250px;  top: -72px; left: 700px;">
        <button type="button" class="btn btn-default" id="createserviceSaveBtn"><span class="glyphicon glyphicon-edit"></span> 保存</button>
    </div>
</div>

<!-- 创建服务信息 -->
<form id="serviceCreateForm" class="form-horizontal" role="form">

    <div class="form-group">
        <label for="service-type" class="col-sm-2 control-label">服务类型<span style="font-size: 15px; color: red;">*</span></label>
        <div class="col-sm-10" style="width: 300px;">
            <select class="form-control" id="service-type">

            </select>
        </div>
    </div>

    <div class="form-group">
        <label for="service-outline" class="col-sm-2 control-label">概要<span style="font-size: 15px; color: red;">*</span></label>
        <div class="col-sm-10" style="width: 300px;">
            <input type="text" class="form-control" id="service-outline">
        </div>
    </div>

    <div class="form-group">
        <label for="service-customer" class="col-sm-2 control-label">客户<span style="font-size: 15px; color: red;">*</span></label>
        <div class="col-sm-10" style="width: 300px;">
            <input type="text" class="form-control" id="service-customer" placeholder="支持自动补全">
        </div>
        <label for="service-status" class="col-sm-2 control-label">状态<span style="font-size: 15px; color: red;">*</span></label>
        <div class="col-sm-10" style="width: 300px;">
            <input type="text" class="form-control" id="service-status" value="新创建" disabled>
        </div>
    </div>

    <div class="form-group">
    <label for="service-request" class="col-sm-2 control-label">服务请求<span style="font-size: 15px; color: red;">*</span></label>
    <div class="col-sm-10" style="width: 300px;">
        <input type="text" class="form-control" id="service-request">
    </div>
    </div>

    <div class="form-group">
        <label for="service-creater" class="col-sm-2 control-label">创建人<span style="font-size: 15px; color: red;">*</span></label>
        <div class="col-sm-10" style="width: 300px;">
            <select class="form-control" id="service-creater">

            </select>
        </div>

        <label for="service-createTime" class="col-sm-2 control-label">创建时间<span style="font-size: 15px; color: red;">*</span></label>
        <div class="col-sm-10" style="width: 300px;">
            <input type="text" class="form-control time" id="service-createTime">
        </div>
    </div>
</form>


</body>
</html>
